<template>
  <view class="food-luck-container">
    <!-- 顶部导航栏 -->
    <view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
      <view class="nav-bar">
        <view class="nav-bar-left">
          <image src="/static/arrow-left-fill.png" class="nav-back-icon" @click="goBack" />
        </view>
        <view class="nav-bar-title">组局</view>
      </view>
    </view>
    <view class="status-height-color" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
    </view>

    <!-- 顶部图片区域 -->
    <view class="banner-image">
      <image src="/static/form-top.png" mode="aspectFill"></image>
    </view>

    <!-- 原有功能卡片区域 - 当zodiac不为空时显示 -->
    <view class="form-group-content" v-if="showFormContent">
      <view class="form-group-content-item" @click="goCurrentForm">
        <view class="form-group-content-item-title">
          <view style="font-weight: 600;font-size: 30rpx;color: #061535;">我的饭局</view>
          <view style="font-weight: 400;font-size: 25rpx;color: #8b93a5;">目前正在进行中的饭局信息</view>
        </view>
      </view>
      <view class="form-group-content-item2 mg-top" @click="goCreateForm">
        <view class="form-group-content-item-title">
          <view style="font-weight: 600;font-size: 30rpx;color: #061535;">创建饭局</view>
          <view style="font-weight: 400;font-size: 25rpx;color: #8b93a5;">目前正在进行中的饭局信息</view>
        </view>
      </view>
      <view class="form-group-content-item3 mg-top" @click="goJoinForm">
        <view class="form-group-content-item-title">
          <view style="font-weight: 600;font-size: 30rpx;color: #061535;">加入饭局</view>
          <view style="font-weight: 400;font-size: 25rpx;color: #8b93a5;">加入其他饭局</view>
        </view>
      </view>
    </view>

    <!-- 信息缺失提示区域 - 当zodiac为空时显示 -->
    <view class="no-data-content" v-if="!showFormContent">
      <view class="no-data-text">
        <view>由于信息缺失</view>
        <view>无法生成AI食谱</view>
      </view>
      <view class="no-data-btn-text" @click="goPerfectInfo">
        去完善信息
      </view>
    </view>

    <!-- 加入饭局弹窗 -->
    <tn-modal v-model="showJoinModal" :custom="true" width="80%" :showCloseBtn="true">
      <view class="join-modal">
        <view class="join-modal-title">加入饭局</view>
        <view class="join-input-row">
          <text class="prefix">NO.</text>
          <input v-model="joinCode" class="join-input" placeholder="请输入编码" placeholder-class="join-input-placeholder" />
        </view>
        <view class="join-actions">
          <view class="confirm-btn" @click="confirmJoin">确认</view>
        </view>
      </view>
    </tn-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      showJoinModal: false,
      joinCode: "",
      showFormContent: false, // 控制是否显示功能卡片
      userInfo: null // 存储用户信息
    }
  },
  onLoad() {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);
    
    // 页面加载时检查用户信息
    this.checkUserInfo();
  },
  onShow() {
    // 页面显示时重新检查用户信息
    this.checkUserInfo();
  },
  methods: {
    // 检查用户信息中的zodiac字段
    checkUserInfo() {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo) {
          this.userInfo = userInfo;
          
          // 获取zodiac字段，兼容两种数据结构
          let zodiac = '';
          if (userInfo.data && userInfo.data.zodiac !== undefined) {
            zodiac = userInfo.data.zodiac;
          } else if (userInfo.zodiac !== undefined) {
            zodiac = userInfo.zodiac;
          }
          // 判断zodiac是否为空，如果为空则显示提示信息
          this.showFormContent = zodiac && zodiac.trim() !== '';

        } else {
          // 没有用户信息，显示提示
          this.showFormContent = false;
        }
      } catch (error) {
        console.error('检查用户信息失败:', error);
        this.showFormContent = false;
      }
    },
    
    // 去完善信息
    goPerfectInfo() {
      // 跳转到完善用户信息的页面
      uni.navigateTo({
        url: '/minePages/login2'
      });
    },
    
    goBack() {
      // 返回时重置组局按钮状态
      // uni.webView.postMessage({
      //   data: {
      //     action: "resetFrameActive",
      //   },
      // });
      
      // 获取当前页面栈
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 获取上一个页面实例
        const prevPage = pages[pages.length - 2];
        // 设置返回参数标识
        prevPage.$vm.fromFormGroup = true;
      }
      
      uni.navigateBack();
    },
    goCurrentForm() {
      uni.navigateTo({
        url: '/activityPages/MyDinnerParty'
      })
    },
    goCreateForm() {
      uni.navigateTo({
        url: '/activityPages/createForm'
      })
    },
    goJoinForm() {
      this.showJoinModal = true;
    },
    confirmJoin() {
      if (!this.joinCode) {
        uni.showToast({
          title: '请输入编码',
          icon: 'none'
        });
        return;
      }
      const userInfo = uni.getStorageSync('userInfo') || {};
      const userid = userInfo?.data?.userid || userInfo?.userid || '';
      let params = {
        userid,
        partycode: this.joinCode
      }
      this.$Request.postApi('/bot/api/agentcadduserparty', params).then(res => {
        if (res.status == 1) {
          uni.showToast({
            title: '加入饭局成功',
            icon: 'none'
          });
          setTimeout(() => {
            uni.navigateTo({
              url: `/activityPages/currentForm?id=${res.data.id}`
            });
          }, 1500);
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
        }
      })
      // 此处可按需添加加入饭局的后续逻辑
      this.showJoinModal = false;
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.food-luck-container {
  padding-bottom: 40rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    width: 100%;

    .nav-bar-left {
      display: flex;
      align-items: center;
      margin-left: 32rpx; // 距离左侧

      .nav-back-icon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 35rpx;
      font-weight: 500;
      color: #000000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-bar-right {
      margin-right: 32rpx;

      .nav-share-icon {
        width: 46.15rpx;
        height: 46.15rpx;
      }
    }
  }
}

/* 顶部图片区域 */
.banner-image {
  width: 100%;
  height: 264rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.mg-top {
  margin-top: 30rpx;
}

.form-group-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 80rpx;

  .form-group-content-item {
    width: 654rpx;
    height: 169rpx;
    border-radius: 18rpx;
    background: url('/static/new-form.png') no-repeat center center;
    background-size: 100% 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .form-group-content-item2 {
    width: 654rpx;
    height: 169rpx;
    border-radius: 18rpx;
    background: url('/static/create-from.png') no-repeat center center;
    background-size: 100% 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .form-group-content-item3 {
    width: 654rpx;
    height: 169rpx;
    border-radius: 18rpx;
    background: url('/static/join.png') no-repeat center center;
    background-size: 100% 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .form-group-content-item-title {
    margin-top: 50rpx;
    margin-left: 40rpx;
  }
}

/* 加入饭局弹窗样式 */
.join-modal {
  padding: 30rpx;
}

.join-modal-title {
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #061535;
  margin-bottom: 20rpx;
}

.join-input-row {
  display: flex;
  align-items: center;
  border: 2rpx solid #e6e8ee;
  border-radius: 12rpx;
  padding: 18rpx 22rpx;
}

.prefix {
  font-size: 28rpx;
  font-weight: 600;
  color: #061535;
  margin-right: 12rpx;
}

.join-input {
  flex: 1;
  font-size: 28rpx;
}

.join-input-placeholder {
  color: #8b93a5;
}

.join-actions {
  margin-top: 30rpx;
}

.confirm-btn {
  width: 100%;
  background: #3a7afe;
  color: #ffffff;
  text-align: center;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 30rpx;
}
.no-data-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100rpx;
}

.no-data-text {
  text-align: center;
  width: 300rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: rgba(0, 0, 0, 0.5);
}

.no-data-btn-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 231rpx;
  height: 74rpx;
  border-radius: 61rpx 61rpx 61rpx 61rpx;
  border: 2rpx solid #2263EC;
  margin-top: 60rpx;
  font-weight: 500;
  font-size: 30rpx;
  color: #2263EC;
}
</style>